<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件监听v-on</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <!-- 在事件监听时，没有参数，可以省略() -->
        <h2>{{count}}<button @click="countincre">+</button>
            <button v-on:click="countjian">-</button></h2>
        
            <button @click="btnclick()">按钮一</button>
            <button @click="btnclick" id="a">按钮二</button>

            <!-- 调用方法时，同时传参数和默认event对象 -->
            <button @click="btnclick3(123,$event)" id="b">按钮三</button>

            <!-- 修饰符 -->
            <!-- .stop阻止事件冒泡 -->
            <div style="background-color: blue;" @click="divclick"><button @click="btnclick4">按钮四</button></div>
            <div style="background-color: green;" @click="divclick"><button @click.stop="btnclick4">按钮五</button></div>

            <!-- .prevent 阻止默认事件 -->
            <form action="baidu" method="get">
                <input type="submit" value="提交">
                <input type="submit" value="提交阻止" @click.prevent="submitpre">
            </form>

            <!-- 监听键盘的点击 -->
            <input type="text" @keyup="keydianji">
            <input type="text" @keyup.enter="keydianji">

            <!-- .once修饰符,只调用一次 -->
            <button @click="btnonce1">按钮六</button>
            <button @click.once="btnonce1">按钮once</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                count:0

            },
            methods: {
                countincre(){
                    this.count++
                },
                countjian(){
                    this.count--
                },

                // 调用如果有()，但没参数，会打印undefind；如果没有(),会打印event
                btnclick(e){
                    console.log(e)
                },
                btnclick3(abc,e){
                    console.log(abc)
                    console.log(e)
                },
                // 修饰符
                divclick(){
                    console.log('div被点击了');
                },
                btnclick4(){
                    console.log('按钮被点击了');
                    
                },
                submitpre(){
                    console.log('阻止默认提交');
                    
                },
                keydianji(){
                    console.log('keyup');
                    
                },
                btnonce1(){
                    console.log('点击了');
                    
                }
            },
            computed: {

            },
        })

    </script>
</body>

</html>